<template>
  <div class="aui-card-list">
    <!-- <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
      <el-col :span="6">
      </el-col>
      <el-col :span="6">
      </el-col>
      <el-col :span="6">
      </el-col>
      <template v-slot:other>
        <el-col :span="6">
        </el-col>
        <el-col :span="6">
        </el-col>
        <el-col :span="6">
        </el-col>
      </template>
    </uni-list-query-card> -->
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar setting>
        <template v-slot:buttons>
          <el-button v-if="$hasPermission('sys:dept:save')" type="primary" @click="addOrUpdateHandle()">
            {{ $t('add') }}
          </el-button>
          <el-button @click="$refs.xTree.setAllTreeExpansion(true)">{{ $t('openall') }}</el-button>
          <el-button @click="$refs.xTree.clearTreeExpand()">{{ $t('closeall') }}</el-button>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getTreeDataList()" circle></el-button>
          <el-dropdown trigger="click" style="padding-left: 5px;" placement="bottom">
            <el-button icon="el-icon-download" circle>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-bottom" @click.native="exportHandle(true)">导出当前页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-download" @click.native="exportHandle()">全部导出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </vxe-toolbar>
      <div class="aui-card-list-body-table">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTree" auto-resize class="vxe-table-element" :tree-config="{children: 'children',trigger:'cell'}" max-height="auto">
          <vxe-table-column field="name" title="dept.name" align="left" tree-node></vxe-table-column>
          <vxe-table-column field="parentName" title="dept.parentName">
          </vxe-table-column>
          <vxe-table-column field="deptType" title="dept.deptType" width="120" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.deptType" size="small"> {{$getDictLabel('SYS_DEPT_TYPE', scope.row.deptType)}}
              </el-tag>
              <el-tag v-else size="small">无</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column field="sort" title="dept.sort" width="80" align="center">
          </vxe-table-column>
          <vxe-table-column field="status" title="dept.state" width="80" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('dept.status0') }}</el-tag>
              <el-tag v-else size="small" type="success">{{ $t('dept.status1') }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column title="handle" width="180">
            <template slot-scope="scope">
              <el-button v-if="$hasPermission('sys:dept:save')" type="text" size="small" icon="el-icon-plus" @click="addChild(scope.row)">{{
                $t('addChild') }}</el-button>
              <el-button v-if="$hasPermission('sys:dept:update')" type="text" icon="el-icon-edit" size="small" @click="addOrUpdateHandle(scope.row)">{{
                $t('update') }}
              </el-button>
              <el-button v-if="$hasPermission('sys:dept:delete')" icon="el-icon-delete" type="text" size="small" @click="deleteHandle(scope.row.id)">{{
                $t('delete') }}
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getTreeDataList"></add-or-update>
      </div>
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dept-add-or-update'
import { treeDataTranslate } from '@/utils/index'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/dept/list',
        getDataListIsPage: false,
        deleteURL: '/sys/dept',
        getTreeDataListURL: '/sys/dept/list',
        exportURL: '/sys/dept/export',
        treeType: true
      },
      mainDataList: [],
      resolveDataList: [],
      loadMaps: {}
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    // 获取树表数据
    getTreeDataList () {
      this.dataListLoading = true
      let rows = this.$refs.xTree.getTreeExpandRecords()
      this.$refs.xTree.clearTreeExpand()
      this.$http.get(
        this.mixinViewModuleOptions.getTreeDataListURL,
        { params: { ...this.dataForm } }
      ).then(({ data: res }) => {
        this.dataListLoading = false
        if (res.code !== 0) {
          return
        }
        this.dataList = treeDataTranslate(res.data, 'id', 'pid')
        this.$xeutils.eachTree(this.dataList, item => {
          if (this.$xeutils.find(rows, val => val.id === item.id)) {
            this.$refs.xTree.toggleTreeExpansion(item)
          }
        })
      }).catch(err => {
        this.dataListLoading = false
        return this.$message.error(err)
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (row) {
      if (!row) { row = {} }
      this.addOrUpdateVisible = true
      this.getTreeCompList(row.id).then(res => {
        this.$refs.addOrUpdate.deptList = res
        this.$nextTick(() => {
          this.$refs.addOrUpdate.initParams = { id: row.id, pid: row.pid }
          this.$refs.addOrUpdate.init()
        })
      })
    },
    addChild (row) {
      this.addOrUpdateVisible = true
      this.getTreeCompList(row.id).then(res => {
        this.$refs.addOrUpdate.deptList = res
        this.$nextTick(() => {
          this.$refs.addOrUpdate.initParams = { id: null, pid: row.id }
          this.$refs.addOrUpdate.init()
        })
      })
    },
    // 父级树组件
    getTreeCompList (id) {
      return new Promise(resolve => {
        this.$http.get(
          this.mixinViewModuleOptions.getTreeDataListURL,
          {
            params: {
              id_ne: id,
              pid_ne: id
            }
          }
        ).then(({ data: res }) => {
          if (res.code !== 0) {
            return false
          }
          resolve(treeDataTranslate(res.data, 'id', 'pid'))
        }).catch(err => {
          return this.$message.error(err)
        })
      })
    }
  }
}
</script>
